<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width">        
<link rel="stylesheet" href="../statics/chart/css/templatemo_main.css">
<title>产品数据统计</title>
</head>
<body>

  <div id="main-wrapper">
  	
    <div class="template-page-wrapper">
      <div class="templatemo-content-wrapper">
        <div class="templatemo-content">
        
        <div class="panel panel-info">
             <div class="panel-heading">公司历年来销售车型数量统计</div>
        </div>
	  	<div>
	  		<p>总共录入产品条目数量:</p>
			<p>现有使用产品条目数量:</p>
			<p>淘汰产品条目数量:</p>
			<p>总的产品换代率:</p>
			<p>年度新增产品条目数量:</p>
			<p>年度淘汰产品条目数量:</p>
			<p>产品年度更新率:</p>
	  	</div>
	  	
          <div class="templatemo-charts">
            <div class="row">
              <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="panel panel-info">
                  <div class="panel-heading">公司销售车型明细</div>
                </div>
                <div class="row templatemo-chart-row">

                  <div class="templatemo-chart-box col-lg-3 col-md-3 col-sm-4 col-xs-12">
                    <canvas id="templatemo-pie-chart"></canvas>
                    <h4>车型推出年限分布图(单位:款)</h4>
                    <!-- <span class="text-muted">Maecenas non</span>   -->
                  </div>
                  
                  <div class="templatemo-chart-box col-lg-3 col-md-3 col-sm-4 col-xs-12">           
                    <canvas id="templatemo-doughnut-chart"></canvas>
                    <h4>能源驱动方式分布图(单位:款)</h4>
                    <!-- <span class="text-muted">Sodales orci aliquet</span>  -->
                  </div>
                  
                  <!-- <div class="templatemo-chart-box col-lg-3 col-md-3 col-sm-4 col-xs-12">           
                    <canvas id="templatemo-radar-chart"></canvas>
                    <h4>车辆类型分布图(单位:款)</h4>
                    <span class="text-muted">Lorem sed</span> 
                  </div> -->

                  <div class="templatemo-chart-box col-lg-3 col-md-3 col-sm-4 col-xs-12">           
                    <canvas id="templatemo-polar-chart"></canvas>
                    <h4>车辆类型分布图(单位:款)</h4>
                    <!-- <span class="text-muted">Curabitur</span>  -->
                  </div>

                </div>                  
              </div>
            </div>
            <div class="row">
              <div class="col-md-6 col-sm-6">
                <div class="panel panel-success">
                  <div class="panel-heading">公司销售过的车型、淘汰的车型、目前销售的车型曲线图</div>
                  <canvas id="templatemo-line-chart">---</canvas>
                </div>                       
              </div>
              <div class="col-md-6 col-sm-6">
                <div class="panel panel-primary">
                  <div class="panel-heading">最近5年车型更新换代条形图</div>
                  <canvas id="templatemo-bar-chart"></canvas>
                </div>
              </div> 
            </div>
          </div>
        </div>
      </div>
      
      <!-- Modal -->
 <!--      <div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
              <h4 class="modal-title" id="myModalLabel">Are you sure you want to sign out?</h4>
            </div>
            <div class="modal-footer">
              <a href="sign-in.html" class="btn btn-primary">Yes</a>
              <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
            </div>
          </div>
        </div>
      </div> -->

    </div>

</div>

    <script src="../statics/chart/js/jquery.min.js"></script>
    <script src="../statics/chart/js/bootstrap.min.js"></script>
    <script src="../statics/chart/js/Chart.min.js"></script>
    <script src="../statics/chart/js/templatemo_script.js"></script>
    <script type="text/javascript">
      // Line chart
      var randomScalingFactor = function(){ return Math.round(Math.random()*30)};
      var lineChartData = {
        labels : ["2011年","2012年","2013年","2014年","2015年","2016年","2017年"],
        datasets : [
        {
          label: "My First dataset",
          fillColor : "rgba(220,220,220,0)",
          strokeColor : "rgba(220,220,220,1)",
          pointColor : "rgba(220,220,220,1)",
          pointStrokeColor : "#fff",
          pointHighlightFill : "#fff",
          pointHighlightStroke : "rgba(220,220,220,1)",
          data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        },
        {
          label: "My Second dataset",
          fillColor : "rgba(151,187,205,0)",
          strokeColor : "rgba(151,187,205,1)",
          pointColor : "rgba(151,187,205,1)",
          pointStrokeColor : "#fff",
          pointHighlightFill : "#fff",
          pointHighlightStroke : "rgba(151,187,205,1)",
          data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        },
        {
            label: "My Third dataset",
            fillColor : "rgba(251,107,155,0)",
            strokeColor : "rgba(251,107,155,1)",
            pointColor : "rgba(251,107,155,1)",
            pointStrokeColor : "#fff",
            pointHighlightFill : "#fff",
            pointHighlightStroke : "rgba(151,187,205,1)",
            data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
          }
        ]

      } // lineChartData
      
      var barChartData = {
    	        labels : ["2013年","2014年","2015年","2016年","2017年"],
    	        datasets : [
    	        {
    	          label: "My First dataset",
    	          fillColor : "rgba(120,220,220,0.4)",
    	          strokeColor : "rgba(120,220,220,1)",
    	          pointColor : "rgba(120,220,220,1)",
    	          pointStrokeColor : "#fff",
    	          pointHighlightFill : "#fff",
    	          pointHighlightStroke : "rgba(220,220,220,1)",
    	          data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
    	        },
    	        {
    	          label: "My Second dataset",
    	          fillColor : "rgba(251,187,205,0.4)",
    	          strokeColor : "rgba(251,187,205,1)",
    	          pointColor : "rgba(251,187,205,1)",
    	          pointStrokeColor : "#fff",
    	          pointHighlightFill : "#fff",
    	          pointHighlightStroke : "rgba(151,187,205,1)",
    	          data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
    	        }
    	        ]

    	      }

      var pieChartData = [
      {
        value: 20,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "潮流新款(低于三个月)"
      },
      {
        value: 30,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "新款(低于一年)"
      },
      {
          value: 30,
          color: "blue",
          highlight: "#5AD3D1",
          label: "畅销款(低于两年)"
        },
      {
        value: 20,
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "经典款(低于五年)"
      }
      ] // pie chart data

      // radar chart
      var radarChartData = {
        labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
        datasets: [
        {
          label: "My First dataset",
          fillColor: "rgba(220,220,220,0.2)",
          strokeColor: "rgba(220,220,220,1)",
          pointColor: "rgba(220,220,220,1)",
          pointStrokeColor: "#fff",
          pointHighlightFill: "#fff",
          pointHighlightStroke: "rgba(220,220,220,1)",
          data: [65, 59, 90, 81, 56, 55, 40]
        },
        {
          label: "My Second dataset",
          fillColor: "rgba(151,187,205,0.2)",
          strokeColor: "rgba(151,187,205,1)",
          pointColor: "rgba(151,187,205,1)",
          pointStrokeColor: "#fff",
          pointHighlightFill: "#fff",
          pointHighlightStroke: "rgba(151,187,205,1)",
          data: [28, 48, 40, 19, 96, 27, 100]
        }
        ]
      }; // radar chart

      // doughnut area chart
      var doughnutAreaChartData = [
      {
        value: 30,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "汽油"
      },
      {
        value: 10,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "天然气"
      },
      {
        value: 5,
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "电能"
      },
      {
        value: 5,
        color: "#949FB1",
        highlight: "#A8B3C5",
        label: "太阳能"
      },
      {
        value: 25,
        color: "#4D5360",
        highlight: "#616774",
        label: "混合动力"
      }

      ];

      // polar area chart
      var polarAreaChartData = [
      {
        value: 30,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "SUV"
      },
      {
        value: 22,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "越野车"
      },
      {
        value: 24,
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "商务车"
      },
      {
        value: 10,
        color: "#949FB1",
        highlight: "#A8B3C5",
        label: "跑车"
      },
      {
        value: 5,
        color: "#4D5360",
        highlight: "#616774",
        label: "房车"
      }

      ];

      window.onload = function(){
        var ctx_line = document.getElementById("templatemo-line-chart").getContext("2d");
        var ctx_bar = document.getElementById("templatemo-bar-chart").getContext("2d");
        var ctx_pie = document.getElementById("templatemo-pie-chart").getContext("2d");
        var ctx_doughnut = document.getElementById("templatemo-doughnut-chart").getContext("2d");
        //var ctxRadar = document.getElementById("templatemo-radar-chart").getContext("2d");
        var ctxPolar = document.getElementById("templatemo-polar-chart").getContext("2d");

        window.myLine = new Chart(ctx_line).Line(lineChartData, {
          responsive: true
        });
        window.myBar = new Chart(ctx_bar).Bar(barChartData, {
          responsive: true
        });
        window.myPieChart = new Chart(ctx_pie).Pie(pieChartData,{
          responsive: true
        });
        window.myDoughnutChart = new Chart(ctx_doughnut).Doughnut(doughnutAreaChartData,{
          responsive: true
        });
        /* var myRadarChart = new Chart(ctxRadar).Radar(radarChartData, {
          responsive: true
        }); */
        var myPolarAreaChart = new Chart(ctxPolar).PolarArea(polarAreaChartData, {
          responsive: true
        });
      }
    </script>
  </body>
</html>